<template>
	<view class="warp">
		<!-- <view @click="handblack" class="blackbox"><image class="blackimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17107328943811032.png"></image></view> -->
		<view class="teacher" :style="bg">
			<view class="t_content">
				<view class="imgbox">
					<image :src="info.Images[0]" mode="aspectFill"></image>
				</view>
				<view class="t_info">
					<view class="t_user">
						<view class="t_name">{{ info.TechnicianName || '--' }}</view>
						<view class="t_lit">
							<text class="text">个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍</text>
						</view>
					</view>
					<!-- <view class="t_lit_btn">
						个人主页
						<uni-icons size="18" color="#d2d2d2" type="right"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="course">
			<view class="c_title">
				<view class="c_tit">{{ info.Title || '--' }}</view>
				<!--  #ifdef MP-WEIXIN -->
				<button  hover-class="none" open-type="share">
					<view class="c_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105661885861455.png" mode=""></image>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button hover-class="none" @click="app_share">
					<view class="c_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105661885861455.png" mode=""></image>
					</view>
				</button>
				<!-- #endif -->
			</view>
                <view  class="describe">
                    <text v-if="toggle" class="describetext">{{info.Remark?info.Remark:'当前课程未有简绍'}}</text>
                    <text v-else class="describetext2">{{info.Remark?info.Remark:'当前课程未有简绍'}}</text>
                    <view v-if="info.Remark !=null && info.Remark.length > 38" :class="toggle?'expand':'retract'" @click="onexpand">
                        <text  class="expandtext">全文</text>
                        <image v-if="toggle" class="expandimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png"></image>
						<image v-else class="expandimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711679435607517.png"></image>
                    </view>
                </view>
		</view>
		<view class="course_deatil">
			<view class="tit">课程详情</view>
			<view class="lit">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png" mode=""></image>
					</view>
					<view class="lit_text">
						时间：{{ $util.unixDatetime(info.ServerDate) }} {{ info.ServerTime }}~{{ info.ServerEndTime }}
					</view>
				</view>
			</view>
			<view class="lit">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167294331333.png" mode=""></image>
					</view>
					<view class="lit_text">
						费用：{{ info.IsPayRegisterFee == 0 ? '免费' : info.RegisterFee+'元/人 （费用线下支付）' }}
					</view>
				</view>
			</view>
			<view class="lit" @click="call">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105663066231291.png" mode=""></image>
					</view>
					<view class="lit_text">电话：{{ info.Mobile }}</view>
				</view>
				<image class="callnum" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105663066231291.png"></image>
			</view>
			<view class="lit">
				<view class="lit_item" style="width: 100%" @click="goAddress">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png" mode=""></image>
					</view>
					<view class="lit_text">地点：{{ info.Place }}</view>
					<view class="gap">
						{{ info.Distance || 0 }}km
						<uni-icons size="12" color="#d2d2d2" type="right"></uni-icons>
					</view>
				</view>
				<!-- <view class="lit_address">
					<view class="address_tit">龙岗中心城雅邦朗悦国际酒店一楼大宴会厅</view>
					<view class="gap">
						{{info.Distance || 0}}km
						<uni-icons size="12" color="#d2d2d2" type="right"></uni-icons>
					</view>
				</view> -->
			</view>
		</view>
		<view class="people">
			<view class="tit">报名列表</view>
			<block>
				<view class="peoplebox" v-for="(item, index) in info.Item" :key="item.ID">
					<view class="p_info">
						<view class="head">
							<image :src="item.HeadImgUrl" mode="aspectFill"></image>
						</view>
						<view class="user_box">
							<view class="name_box">
								<view class="name">{{ item.Name || '--' }}</view>
								<view class="member member_hei_vip" v-if="item.UserType == '黑金年卡会员'">黑卡</view>
								<view class="member member_hei" v-if="item.UserType == '黑金卡会员'">黑金卡</view>
								<view class="member number_huan" v-if="item.UserType == '金卡会员'">金卡</view>
								<view class="member number_huan" v-if="item.UserType == '体验会员'">体验金卡</view>
							</view>
							<view class="user_lit">
								报名者的个人签名
							</view>
						</view>
					</view>
					<view class="p_time">
						{{ getTime2(info.CreateTime) }}
					</view>
				</view>
			</block>
			<view class="bottom_lit">已经到底啦~</view>
		</view>
		<view style="height: 280rpx"></view>
		<view class="btn_box">
			<view class="go_btn" @click="subJoin">立即报名</view>
		</view>
		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>

export default {
	components: {
		
	},
	data() {
		return {
			
			ID: '',
			info: {},
			bg: '',
			toggle:true,
		};
	},
	computed: {
		getTime2() {
			return (l) => {
				let d = new Date(l);
				let timestamp = d.getTime();
				return this.$u.date(timestamp, 'yyyy-mm-dd hh:MM');
			};
		},
	},
	onLoad(e) {
		this.ID = e.id;
		this.init();
		console.log(this.getTime2('2024-03-13T14:19:43.79'));
	},
	onPageScroll(e){
		console.log(e.scrollTop);
	},
	onShareAppMessage(res) {
		//发送给朋友
	
		return {
			title: '【教练课】向您推荐' + this.info.Title,
			path: `/pages/teacher/detail?id=${this.info.ID}&pid=${this.UserID}`,
		};
	},
	methods: {
        //返回上一页
        handblack(){
            uni.navigateBack({
                delta: 1
            });
        },
        //简绍伸缩
        onexpand(){
            this.toggle = !this.toggle;
        },
		// 获取定位
		async getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res);
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0,
						};
						resolve(defaultLocation);
					},
				});
			});
		},
		app_share() {
			this.$refs.share.open();
		},
		sharePYQ() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: '【动魅】' + this.resData.Title,
				summary: this.resData.Remark,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: '【动魅' + this.resData.GolfType + '】' + this.resData.Title,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/ball/ball_details?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/ball/ball_details?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});

			// this.is_app_share_show = false;
		},
		async init() {
			let loc = await this.getLocationSysc();

			this.longitude = loc.longitude;
			this.latitude = loc.latitude;
			let res = await this.$api.post('Appointment/Detail', {
				ID: this.ID,
				User_Lng: loc.longitude,
				User_Lat: loc.latitude,
			});
			this.info = res.data;
			this.info.Images = JSON.parse(this.info.Images);
			this.bg = `background-image: url('${this.info.Images[0]}');`;
		},
		async subJoin() {
			let u = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID,
			});

			this.user = u.data;
			if (this.user.IsAuth == 0) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户请先注册账号',
					confirmText: '关闭',
					cancelText: '注册账号',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1,
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					},
				});
			}

			if (this.user.IsAuth == 0) this.nav_to(`/pages/user/start2`);
			else this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);
		},
		goAddress() {
			uni.openLocation({
				latitude: parseFloat(this.info.Latitude),
				longitude: parseFloat(this.info.Longitude),
				name: this.info.Place, //地址名称
				address: this.info.Place, //详细地址名称
				scale: 18,
			});
		},
		call() {
			uni.makePhoneCall({
				phoneNumber: this.info.Mobile,
				// 成功回调
				success: (res) => {
					console.log('调用成功!');
				}, // 失败回调
				fail: (res) => {
					// this.$pv.msg('暂无联系电话')
					console.log('调用失败!');
				},
			});
		},
	},
};
</script>

<style lang="scss">
.blackbox{
    position: fixed;
    left: 30rpx;
    top: 98rpx;
    z-index: 2000;
    .blackimg{
        width: 52rpx;
        height: 52rpx;
    }
}
page {
	background-color: #fff;
}
button[plain] {
	border: 0
}
button::after{ border: none;} 
image {
	width: 100%;
	height: 100%;
}
.line {
	width: 100%;
	height: 4rpx;
	background-color: #3b3b3b;
}
.warp {
	.teacher {
		width: 100%;
		height: 568rpx;
		background: url('https://gd-hbimg.huaban.com/9304a0152f69cb814339b669afd2cc8ab49bb6e34a292-t5guSa_fw658webp');
		background-repeat: no-repeat;
		background-position: 0 30%;
		background-size: cover;
		padding: 32rpx 26rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 568rpx;
			z-index: 0;
			background-image: linear-gradient(to top, black, transparent);
		}

		.t_content {
			width: 100%;
			height: 95%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			.imgbox {
				z-index: 9;
				width: 240rpx;
				// height: 100%;
				margin-bottom: 116rpx;
				image {
					width: 220rpx;
					height: 284rpx;
					border-radius: 16rpx;
					// border: 4rpx solid #fff;
				}
			}
			.t_info {
				z-index: 9;
				width: 60%;
				height: 100%;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding: 20rpx 0;
				justify-content: space-between;
				.t_name {
					color: #fff;
					font-size: 36rpx;
				}
				.t_lit {
					font-size: 30rpx;
					.text {
						font-size: 28rpx;
						color: #FFFFFF;
						display: -webkit-box;
						-webkit-line-clamp: 4; /* 控制显示的行数，这里设置为3行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
						line-height: 1.8;
						transition: all 0.3s ease; /* 添加过渡效果 */
					}
				}
				.t_lit_btn {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}

	.course {
		padding: 26rpx;
		padding-bottom: 40rpx;
		margin-top: -20rpx;
		background: #fff;
		z-index: 99;
		position: sticky;
		border-radius: 24rpx;
		.c_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-bottom: 20rpx;
			.c_tit {
				color: #333333;
				font-size: 36rpx;
				font-weight: 600;
			}
			.c_icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	.course_deatil {
		padding: 20rpx 0rpx;
		margin: 0 26rpx;
		border-top: 1rpx solid #E4E4E4;
		border-bottom: 1rpx solid #E4E4E4;
		view {
			color: #f5f5f5;
		}
		.tit {
			font-size: 32rpx;
			color: #333333;
		}
		.lit {
			margin: 10rpx 0;
			width: 100%;
			position: relative;
			.callnum{
					width: 35rpx;
					height: 35rpx;
					position: absolute;
					right: 10rpx;
					top: 0;
					border-left: 1rpx solid #E6E6E6;
					padding:  0 10rpx;
			}
			.lit_item {
				width: 70%;
				display: flex;
				// align-items: center;
				.icon {
					image {
						width: 32rpx;
						height: 32rpx;
					}
					margin-right: 10rpx;
				}
				.lit_text {
					width: 766rpx;
					font-size: 28rpx;
					color: #666666;
				}
				.gap {
					margin-left: 10rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: #999999;
				}
			}
			.lit_address {
				font-size: 26rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;
				.address_tit {
					width: 75%;
					color: #a1a1a1;
				}
				.gap {
					display: flex;
					align-items: center;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}

	.people {
		padding: 40rpx 0rpx;
		margin: 0 26rpx;
		.tit {
		}
		.peoplebox {
			padding: 26rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 4rpx solid #3b3b3b;
			view {
				color: #7a7a7a;
			}
			.p_info {
				display: flex;
				align-items: center;
				.head {
					width: 90rpx;
					height: 90rpx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.user_box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name_box {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						.name {
							color: #333333;
						}
					}
					.user_lit {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.p_time {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.bottom_lit {
			margin: 20rpx auto;
			text-align: center;
			font-size: 26rpx;
			color: #727272;
		}
	}

	.btn_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		.go_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #0D0D0D;
		}
	}
}
.member {
	min-width: 52rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
	border-radius: 2rpx;
	border: 2rpx solid #d6c6ab;
	text-align: center;
	color: #fff !important;
	font-size: 16rpx;
	line-height: 32rpx;
	margin-left: 10rpx;
}

.number_huan {
	color: #4c310c;
	background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
	border: 2rpx solid #e6ceb5;
}

.number_hei {
	color: #fff;
	background: linear-gradient(180deg, #7E7E7E 0%, #292929 100%);
	border: 2rpx solid #e6ceb5;
}

.number_hei_vip {
	color: #fff;
	background: linear-gradient(180deg, #7E7E7E 0%, #292929 100%);
	border: 2rpx solid #e6ceb5;
}

.member_wealth {
	width: 45rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #deb214 0%, #f88410 100%);
	border-radius: 2rpx;
	border: 2rpx solid #d6c6ab;
	text-align: center;
	color: #4C310C;
	font-size: 16rpx;
	line-height: 32rpx;
	margin-left: 5rpx;
}
.describe{
    margin-top: 10rpx;
    min-height: 78rpx;
    position: relative;
    margin-bottom: 15rpx;
}
.describetext{
    width: 83%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 28rpx;
}
.describetext2{
    width: 90%;
    font-size: 28rpx;
}
.expand{
    position: absolute;
    right: 20rpx;
    top: 35rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
}
.retract{
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    text-align: center;
}
.expandtext{
    font-size: 28rpx;
}
.expandimg{
    width: 20rpx;
    height: 16rpx;
    vertical-align: middle;
}
</style>
